<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:g="http://giava.by/common/base"
	template="/WEB-INF/layout/t.xhtml">

	<ui:define name="title">
		<h:outputText value="Gestione Picasa Colection" />
	</ui:define>
	<ui:define name="roles">
		<f:attribute name="roles" value="picasa" />
	</ui:define>

	<ui:define name="content">

		<script type="text/javascript"
			src="#{request.contextPath}/scripts/it_editor.js"></script>

		<script language="javascript" type="text/javascript"
			src="#{request.contextPath}/scripts/tiny_mce/tiny_mce.js"></script>

		<h:form id="picasaForm" enctype="multipart/form-data">

			<p:messages id="messages" />
			<center>
				<p:panel header="Gestione Prodotti">

					<script language="javascript" type="text/javascript">
		tinyMCE
		.init({
			// General options
			mode : "specific_textareas",
			language : "it",
			entity_encoding : "named",
			theme : "advanced",
			editor_selector: "tinyMceTa",
			convert_urls : false,
			plugins : "fullscreen,advlink,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,table",
			// Theme options ... ho tolto il pulsante imgBrows.. in notizie si mettono tramite il form di upload sotto, no?
			theme_advanced_buttons1 : "fullscreen,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontsizeselect,fontselect,|,hr,|,cut,copy,paste,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,cleanup,|,code",
			theme_advanced_buttons2 : "tablecontrols,|,link,unlink",
			theme_advanced_buttons3 : "",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_fonts : "Arial=Arial;Courier New=Courier New;Times New Roman=Times New Roman;",
			theme_advanced_resizing : true,
			setup : function(ed) {
				<f:verbatim rendered="#{not copertina}">
				// Add a custom button
				ed
						.addButton(
								'imgBrows',
								{
									title : 'Browser immagini',
									image : '#{facesContext.externalContext.request.contextPath}/images/img.gif',
									onclick : function() {
										// Add you own code to execute something on click
										ed.focus();
//										ed.selection.setContent('<div id="imgHere" style="text-align:center;"></div>');
										var popupWindow = window.open('#{request.contextPath}/private/page/imagesTiny.jsf',"Browser immagini","height=600,width=800,modal=yes,alwaysRaised=yes")
										popupWindow.tinyEditor = ed;
									}
								});
				</f:verbatim>
			}
		});
</script>

					<h:panelGrid columns="2" style="width: 95%">
						<h:outputLabel for="name" value="Nome" />
						<h:inputText id="name"
							value="#{collectionController.element.name}" style="width: 100%;"
							required="true" />

						<h:outputLabel for="preview" value="Anteprima:" />
						<h:inputTextarea id="preview" cols="20" rows="20"
							value="#{collectionController.element.preview}"
							style=" height : 166px; width: 100%;" />


						<h:outputLabel for="description" value="Descrizione:" />
						<h:inputTextarea
							value="#{collectionController.element.description}"
							id="description" styleClass="tinyMceTa"
							style=" height : 166px; width: 100%;" />

						<h:outputLabel for="tags" value="Tags:" />
						<h:inputTextarea id="tags" cols="20" rows="3"
							value="#{collectionController.element.tags}"
							style=" height : 50px; width: 100%;" />

						<h:outputLabel value="Album:" for="album" />
						<h:selectOneMenu id="album" style="width: 100%;"
							value="#{collectionController.album.feedLink}" required="true">
							<f:selectItems value="#{albumItems}" />
							<p:ajax update="albumPhotos" event="change"
								listener="#{collectionController.loadAlbumPhotos}" />
						</h:selectOneMenu>
					</h:panelGrid>
					<br />
				</p:panel>
				<br />
				<p:panel id="photoCollection">
					<f:facet name="header">
						<h:outputText value="Foto selezionate" />
					</f:facet>
					<p:dataTable id="picasaList2" rowIndexVar="rowIndex" var="photo"
						value="#{collectionController.photos}" rows="0">
						<p:column width="50">
							<h:outputText value="#{rowIndex+1}" />
						</p:column>

						<p:column width="300">
							<f:facet name="header">title</f:facet>
							<h:outputText value="#{photo.title}" />
						</p:column>

						<p:column width="300">
							<f:facet name="header">index</f:facet>
							<h:outputText value="#{photo.index}" />
						</p:column>

						<p:column width="300">
							<f:facet name="header">thumbnail</f:facet>
							<h:graphicImage value="#{photo.thumbnailUrl}"
								width="#{photo.thumbnailWidth}"
								height="#{photo.thumbnailHeight}" alt="#{photo.title}"
								title="#{photo.title}" style="padding: 5px;" />
						</p:column>
						<p:column width="300">
							<f:facet name="header">collection cover?</f:facet>
							<h:outputLabel value="scegli" for="cover" />
							<p:selectBooleanCheckbox value="#{photo.cover}" id="cover">
								<p:ajax update=":picasaForm:photoCollection"
									listener="#{collectionController.useLikeCover(photo.index)}" />
							</p:selectBooleanCheckbox>
						</p:column>
						<p:column width="100">
							<f:facet name="header">operazioni</f:facet>
							<center>
								<p:commandLink
									action="#{collectionController.removeFromPhotos(photo.index)}"
									value="elimina" update=":picasaForm:photoCollection"
									ajax="true" immediate="true" />
							</center>
						</p:column>
					</p:dataTable>
				</p:panel>
				<br />
				<p:panel id="albumPhotos">
					<f:facet name="header">
						<h:outputText
							value="Seleziona le foto dall'album #{collectionController.album.title}" />
					</f:facet>
					<p:dataTable id="picasaList" rowIndexVar="picasaIndex"
						var="photoAlbum" value="#{collectionController.albumPhotos}"
						rows="#{collectionController.pageSize}" paginator="true"
						dynamic="true">
						<p:column width="50">
							<h:outputText value="#{picasaIndex+1}" />
						</p:column>

						<p:column width="300">
							<f:facet name="header">title</f:facet>
							<h:outputText value="#{photoAlbum.title}" />
						</p:column>
						
						<p:column width="300">
							<f:facet name="header">index</f:facet>
							<h:outputText value="#{photoAlbum.index}" />
						</p:column>

						<p:column width="300">
							<f:facet name="header">thumbnail</f:facet>
							<p:commandLink
								action="#{collectionController.addPhotoToList(photoAlbum.index)}"
								update=":picasaForm:picasaList2" ajax="true" immediate="false">
								<h:graphicImage value="#{photoAlbum.thumbnailUrl}"
									width="#{photoAlbum.thumbnailWidth}"
									height="#{photoAlbum.thumbnailHeight}"
									alt="#{photoAlbum.title}" title="#{photoAlbum.title}"
									style="padding: 5px;" />
							</p:commandLink>
						</p:column>
					</p:dataTable>
				</p:panel>


				<h:panelGrid columns="4">

					<h:commandButton action="#{collectionController.save}"
						value="Salva" immediate="false"
						rendered="#{not collectionController.editMode}" />

					<h:commandButton action="#{collectionController.update}"
						value="Salva le modifiche" immediate="false"
						rendered="#{collectionController.editMode}" />

					<h:commandButton action="#{collectionController.delete}"
						value="Elimina" rendered="#{collectionController.editMode}"
						immediate="true"
						onclick="if (!confirm('Vuoi davvero eliminare?')) return false" />
				</h:panelGrid>
			</center>
		</h:form>

	</ui:define>
</ui:composition>